<template>
    <div class="container">
        <div class="category animated bounceInLeft">
            <h2>[基础产品]X6 图编辑引擎</h2>
            <p class="desc">极易定制、开箱即用、数据驱动的图编辑引擎</p>
            <div class="demo-wrap">

            </div>
        </div>
        <div class="category animated bounceInRight">
            <h2>[扩展产品]XFlow</h2>
            <p class="desc">基于 X6 图编辑引擎、面向 React 用户的应用级解决方案</p>
            <div class="demo-wrap">

            </div>
        </div>
    </div>
</template>

<script lang="ts">
import {defineComponent} from "vue"
import useX6Demo from "@/hooks/useX6Demo.hook.ts"

export default defineComponent({
    name: "X6",
    setup() {
        const {demoList, toggleDemo} = useX6Demo()

        return {
            demoList, toggleDemo
        }
    }
})
</script>

<style scoped lang="less">
@import "~@/common/css/demo.style.less";
</style>
